<template>
	<view class="page flex-col">
			<cu-custom bgColor="bg-gradual-red" id="cu-custom" :isBack="false">
				<block slot="content">首页</block>
			</cu-custom>
			<view class="hearder">
				<navigator url="/pages/searchcontent/searchcontent" class="insearch">
					<uni-search-bar clearButton="none" cancelButton="none" placeholder="搜索你感兴趣的..." @confirm="search">
					</uni-search-bar>
				</navigator>
				<!-- 轮播 -->
				<view class="lunboswiper">
					<view class="backgroudred"></view>
					<view class="swiperbox">
						<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true"
							:autoplay="true" interval="3000" duration="500">
							<swiper-item v-for="(item,index) in swiperList" :key="index" @click="showur(item)">
								<image :src="$getFileAccessHttpUrl(item.photo)" mode="aspectFill"></image>
			
							</swiper-item>
						</swiper>
					</view>
			
				</view>
			
			</view>
			
			<view class="navlist">
				<view class="flex" v-for="(item,index) in queryParentData" :key="index" @click="lookMore(item.id,'1')">
					<view class="imagebox">
						<image class="image" :src="$getFileAccessHttpUrl(item.icon)" mode="widthFix"></image>
					</view>
					<view class="title">{{item.categoryName}}</view>
				</view>
			</view>
			
			<view class="content julitop">
			
				<!-- 头部 -->
				<view class="scrollDabox">
					<scroll-nav :style="{top:navHeight+'px'}"
						:class="[hightTop == 1 && scrollshow ? 'topnavFixed' : '', 'space-around']" :brands="brands" @tabtap="tabtap"
						ref='brands'></scroll-nav>
				</view>
				<!-- 显示区域 -->
				<view class="uni-tab-bar">
					<swiper class="swiper-box" :style="[{height: swiperHeight+ 'px'}]" :current="tabIndex"
						@change="tabChange">
						<swiper-item v-for="(items,index) in auctionpageData" :key="index">
							<scroll-view scroll-y class="scrolllist">
								<template v-if="items.list.length > 0">
									<!-- 图文列表 -->
									<block>
										<view class="section1 flex-col">
											<view class="Body flex-col">
												<view class="bd2 flex-col justify-between">
													<view class="box3 flex-col">
														<view class="group1 flex-col"
															@click="godetail(item.auctionId,item.startTime)"
															v-for="(item, index1) in items.list" :key="index1">
															<view class="outer1 flex-row justify-between">
																<view class="box4 flex-col">
																	<!-- <easy-loadimage class="box5" mode="aspectFill"
																		                :scroll-top="scrollTop"
																						loading-mode="skeleton-1"
																		                :image-src="item.icon"></easy-loadimage> -->
																	<image
																		:class="[item.icon == '' ? 'loadfail-img' : item.icon,'box5'] "
																		@error="imgerror($event, index1)"
																		:src="$getFileAccessHttpUrl(item.icon)" mode="aspectFill"></image>
																</view>
																<view class="flex-col  justify-between">
																	<view class="TextGroup1 flex-col">
																		<view class="txt2">{{item.title}}</view>
																		<view class="wordbox">
																			<view class="word3 labelbordr">
																				{{item.category}}</view>
																		</view>
																		<view class="wordbox">
																			<view class="word3">
																				拍品数量：{{item.itemNum == null ? '0' : item.itemNum}},
																			</view>
																			<view class="word2">
																				下单数量：{{item.orderNum == null ? '0' : item.orderNum}}
																			</view>
																		</view>
																		<view class="wordbox" v-if="item.status == 2">
																			<view class="word3">
																				报名截止时间：{{item.applyTime}}</view>
																		</view>
																		<view class="timeout">
																			<view class="outer2 flex-col"
																				v-if="item.status != 6">
																				<view class="word5" v-if="item.status == 2">
																					未开始
																				</view>
																				<view class="word5" v-if="item.status == 4">
																					进行中
																				</view>
																				<view class="word5" v-if="item.status == 5">
																					暂停中
																				</view>
																				<view class="word5" v-if="item.status == 6">
																					已结束
																				</view>
																			</view>
																			<!-- <view class="word4">{{liveCountdown}}</view> -->
																			<view class="word4" v-if="item.status == 2 && item.showtime != ''">
																				{{item.showtime == '00天00时00分00秒' ? auctionlist() : item.showtime}}</view>
			
																		</view>
			
																	</view>
																</view>
															</view>
															<view class="wordbox positop"
																:style="item.auctionWay == 2 ? 'background: url(../../static/home/128/Bgblue.png) -4px 0px no-repeat;background-size: 57px 19px;':'background: url(../../static/home/128/Bgorange.png) -4px 0px no-repeat;background-size: 57px 19px;'">
																<view class="word3">{{item.auctionWayText}}</view>
															</view>
														</view>
														<!-- <view class="breakzhuan">跳转</view> -->
														<view class="flex flex-direction padding">
															<button class="cu-btn bg-red shadow"
																@tap="lookMore(index,'2')" type="warn"
																plain="true">查看更多</button>
														</view>
													</view>
												</view>
											</view>
			
										</view>
									</block>
								</template>
			
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			
			<!-- 类别弹框 -->
			<uni-popup class="top" ref="changsuopopup" type="bottom" :mask-click="true">
				<view class="scortop">
					<view class="title">场所管理</view>
					<uni-icons type="close" size="30" @click="compcloseTwo"></uni-icons>
				</view>
				<view class="scrollbox">
					<view class="box">
						<view class="icon">
							<!-- <myRadio @change="changecommunity" :searchUrl="deptUrl" :params="deptParams" rangeKey='title'>
						</myRadio> -->
						</view>
					</view>
			
				</view>
			</uni-popup>
				
			
			<!-- 自定应loding -->
			<!-- <request-loading></request-loading> -->
			
			<!-- 绑定微信 -->
			<!-- <getuser ref="getuser" @change='change' :firstclick="firstclick" :wxshow="wxshow"></getuser> -->
			
	</view>
</template>
<script>
	import server from '@/api/server.js'
	import scrollNav from '../component/scrollNav.vue'
	export default {
		components: {
			scrollNav,
		},
		data() {
			return {
				wxshow: true,
				loading:true,
				queryParentData: [],
				swiperHeight: 500, //高度
				brands: [
					'拍卖专场',
					'历史专场',
				],
				tabIndex: 0,
				swiperList: [],
				auctionpageData: [{
						list: []
					},
					{
						list: []
					},
				],
				params: {
					category: '',
					status: 1,
					title: '',
					pageNo: 1,
					pageSize: 10,
				},
				overTime: '2022-03-22 20:54:00',
				timeData: '', //存放每条数据的处理好的倒计时
				liveCountdown: '',
				scrollTop: 0,
				myScroll: 0,
				className: false,
				liveCountTimes: null,
				navHeight:'',
				hightTop:0,
				wmssjH:'',
				scrollshow:false,
			};
		},
		computed: {
			firstclick() {
				return this.$store.getters.usermodel
			}
		},
		onShow() {
			var that = this
			//跳转了页面回来后重新获取
			//重新获取的需求是比如你要固定的元素上面某个元素会根据字段做显示隐藏
		},
		
		mounted() {
			//默认第一次首页弹出绑定小程序 之后全局设置一个变量 第二次登录不可点
			this.$store.commit('USER_MODEL', false)
			this.apibannerlist()//轮播
			this.apiqueryParent()//类别
			this.auctionlist()//列表
			console.log(this.$store.getters.token, 'tokentokentokentokentokentoken')
			//获取导航菜单距离顶部的距离
			// this.$nextTick(function(){
			// 	uni.createSelectorQuery().select('.julitop').boundingClientRect(res=>{
			// 		console.log('createSelectorQuery',res.top)
			// 		this.myScroll =res.top;
			// 	}).exec();	
			// })
			this.query()
			try {
			    const storage_apiqueryParent = uni.getStorageSync("storage_apiqueryParent");
			    if(storage_apiqueryParent) {
					this.queryParentData = storage_apiqueryParent
			    }
				const storage_apiauctionpage = uni.getStorageSync("storage_apiauctionpage");
				if(storage_apiauctionpage) {
					this.auctionpageData[0].list = storage_apiauctionpage
				}
			} catch(e){
			    //错误
				console.log('错误',e)
			}
			
		},
		beforeDestroy() {
			console.log("this.liveCountTimes", '22222222222222222222222222222')

			clearInterval(this.liveCountTimes)
			this.liveCountTimes = null;
		},
		methods: {
			query() {
				var that = this
				//这里获取的是你要固定的元素上个元素的高度和它距离顶部的高度值
				const query = uni.createSelectorQuery().in(this);
				//    query.select('.spacebox').boundingClientRect(data => {
				//       //data.height获取元素高度值  data.top获取距离顶部的值
				//    this.wmssjH = data.top+data.height
				//    }).exec();
			
				var wmssjH = 0
				query.select('#cu-custom').boundingClientRect(data => {
					console.log('cu-custom', data.height)
					wmssjH += data.height
					that.navHeight = data.height
				}).select('.hearder').boundingClientRect(data => {
					console.log('hearder', data.height)
					wmssjH += data.height
				}).select('.navlist').boundingClientRect(data => {
					console.log('navlist', data.height)
					wmssjH += data.height
					that.wmssjH = wmssjH
					that.$emit('getquery',that.wmssjH)
					console.log('that.wmssjH', that.wmssjH)
				}).exec();
				
			
			
			
			},
			imgerror(e, img_index) {
				console.log(e, 'e')
				console.log(img_index, 'img_index')
				if (this.auctionpageData[this.tabIndex].list.length > 0) {
					// this.auctionpageData[this.tabIndex].list[img_index].icon = "/static/home/128/loadfail.png"
					this.$set(this.auctionpageData[this.tabIndex].list[img_index],'icon','/static/home/128/loadfail.png')
				}
			},
			//查看更多
			lookMore(data, index) {
				if (index == '2') {
					uni.navigateTo({
						// ? 后面加要传的参数， 多个参数用 & 隔开 
						url: '/pages/searchcontent/searchcontent?status=' + (data + 1)
					})
				} else {
					uni.navigateTo({
						// ? 后面加要传的参数， 多个参数用 & 隔开 
						url: '/pages/searchcontent/searchcontent?id=' + data
					})
				}
				clearInterval(this.liveCountTimes)
				this.liveCountTimes = null;
			},
			getLiveTimeCount(data) {
				let that = this
				//注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
				var data = data
				data.forEach((item,index) => {
					var replaceTime = item.startTime
					let transedPreTime = replaceTime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
					let nowTime = new Date().getTime(); //获取当前时间毫秒数
					let preTime = new Date(transedPreTime).getTime() //处理好格式之后获取结束时间的毫秒数
					let obj = null;
					
					if (preTime - nowTime > 0) {
						let time = (preTime - nowTime) / 1000;
						let day = parseInt(time / (60 * 60 * 24));
						let hou = parseInt(time % (60 * 60 * 24) / 3600);
						let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
						let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
						obj = {
							day: day < 10 ? '0' + day : day,
							hou: hou < 10 ? '0' + hou : hou,
							min: min < 10 ? '0' + min : min,
							sec: sec < 10 ? '0' + sec : sec
						};
						item.showtime = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
						// console.log(item.showtime,'12345678')
					} else {
						// obj = {
						// 	day: '00',
						// 	hou: '00',
						// 	min: '00',
						// 	sec: '00'
						// };
						item.showtime = ''
						// console.log('item.showtime',item.showtime)
					}
					// that.$set(that.auctionpageData[that.tabIndex].list,index,{...data,startTime:item.showtime})
				})
				this.auctionpageData[this.tabIndex].list = data
				// console.log('this.auctionpageData[this.tabIndex].list',this.auctionpageData[this.tabIndex].list)
				this.$forceUpdate();
			},
			auctionlist(){
				this.apiauctionpage()
				// this.gonexttick()
			},
			apiauctionpage() {
				var that = this
				this.params.status = this.tabIndex + 1
				server.auctionpage(this.params).then(res => {
					console.log(res)
					this.auctionpageData[this.tabIndex].list = res.data.result.records
					//本地存储
					try{
						if(this.tabIndex == 0){
							uni.setStorageSync('storage_apiauctionpage', res.data.result.records)
						}
					} catch (e){
					    //错误
						console.log(e)
					}
					this.gonexttick()
					// that.$nextTick(function(){
					// 	// console.log('1234543454345t')
					// 	that.getLiveTimeCount(that.auctionpageData[that.tabIndex].list)
					// 	that.getCurrentSwiperHeight('.scrolllist');
					// })
				})
			},
			gonexttick(){
				let that = this
				that.$nextTick(function(){
					// console.log('1234543454345t')
					that.query()
					that.liveCountTimes = setInterval(function(){
						that.getLiveTimeCount(that.auctionpageData[that.tabIndex].list)
					},1000)
					that.getCurrentSwiperHeight('.scrolllist');
				})
			},
			godetail(auctionId, time) {
				uni.navigateTo({
					url: '/page_myauction/myauction/myauctionDetail?auctionId=' + auctionId
				})
				clearInterval(this.liveCountTimes)
				this.liveCountTimes = null;
			},
			apiqueryParent() {
				server.queryParent().then(res => {
					console.log(res)
					this.queryParentData = res.data.result
					//本地存储
					try{
						uni.setStorageSync('storage_apiqueryParent', res.data.result)
					} catch (e){
					    //错误
						console.log(e)
					}
				})
			},
			// 获取内容高度
			getCurrentSwiperHeight(element) {
				// clearInterval(this.liveCountTimes);
				// this.liveCountTimes = null;
				if (element == undefined) {
					element = '.scrolllist'
				}
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					// console.log(res)
					// console.log(res[0])
					// console.log(res[0][this.tabIndex].height)
					this.swiperHeight = res[0][this.tabIndex].height;
					this.scrollshow = true
					console.log('that.scrollshow',this.scrollshow)

				})
			},
			//滑动切换导航
			tabChange(e) {
				console.log(e, '999999999999999999999999')
				this.tabIndex = e.detail.current;
				this.$refs.brands.handleScroll(this.tabIndex)
				this.auctionlist()
			},
			tabtap(index) {
				this.tabIndex = index;
				this.auctionlist()
			},
			screen() {
				this.$refs.changsuopopup.open('top')
			},
			compcloseTwo() {
				this.$refs.changsuopopup.close()
			},
			apibannerlist() {
				server.bannerlist().then(res => {
					console.log(res)
					this.swiperList = res.data.result
				})
			},
			showur(item) {
				uni.navigateTo({
					url: '/page_myauction/myauction/myauctionDetail?auctionId=' + item.auctionId
				})
			}
		},
	};
</script>


<style scoped lang="scss">
	.page {
		position: relative;
	}

	.Body {
		z-index: 4;
		position: relative;
	}



	.hearder {
		padding-bottom: 108rpx;
		background: white;

		.insearch {
			background-color: #B81D22;
			padding: 10px;
		}

		.lunboswiper {
			position: relative;

			.swiperbox {
				position: absolute;
				top: 0;
				padding: 0 20px 20px 20px;
				width: 100%;
			}

			.backgroudred {
				height: 290rpx;
				background: #B81D22;
				border-bottom-left-radius: 80%;
				border-bottom-right-radius: 80%;
			}

			.screen-swiper {
				overflow: hidden;
				border-radius: 10px;
			}
		}

	}

	/deep/.uni-searchbar__box {
		border-radius: 50px !important;
	}

	.swiper-box {
		height: calc(100% - 40px);
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			position: relative;

			&.current {
				color: #B81D22;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
					width: 30px;
					height: 0;
					border-bottom: 4px solid #B81D22;
					border-radius: 50px;
				}
			}
		}
	}

	/deep/.bg-gradual-pink {
		background-image: linear-gradient(45deg, #B81D22, #B81D22);
	}

	.navlist {
		display: flex;
		text-align: center;
		flex-wrap: wrap;
		padding: 5px;
		background-color: white;
		margin: 5px;
		border-radius: 8px;

		.flex {
			display: flex;
			flex-direction: column;
			width: 20%;
			padding: 5px;

			.image {
				width: 30px;
				height: 30px;
				border-radius: 30px;
			}

			.title {
				color: rgb(102, 102, 102);
				font-size: 14px;
			}
		}
	}

	.breakzhuan {
		margin: auto;
		background: #B81D22;
		padding: 5px 26px;
		border-radius: 50px;
		color: white;
	}

	.scrollDabox {
		height: 45px;
		float: left;
		width: 100%;
	}

	.topnavFixed {
		background: #fff;
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 999;
	}
	.content julitop{
		float: left;
		width: 100%;
	}
</style>
